<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>小米网后台主页-会员信息页面</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <!-- 工具 -->
    <script src="js/HttpUtil.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            loadUser();
        });

        //请求用户信息---高级搜索
        function loadUser() {
            let u=-1;
            if($("#user").get(0).checked){
                u=$("#user").val()
            }
            let m=-1;
            if($("#merchant").get(0).checked){
                m=$("#merchant").val()
            }
            let s=-1;
            if($("#superAdmin").get(0).checked){
                s=$("#superAdmin").val()
            }
            console.log($("#superAdmin").get(0).checked);
            let url="adminUser/userSeek";
            let params={
                username:$("#username").val(),
                user:u,
                merchant:m,
                superAdmin:s
            };
            console.log("userSeek");
            console.log($("#user"))
            console.log(params);
            httpPost(url,params,function (res) {
                showMsg(res)
            })
        }
        // function loadUser() {
        //     //ajax 请求后台
        //     $.ajax({
        //         url: "http://localhost:8080/shop_api/adminUser/select",
        //         method: "post",
        //         success: showMsg,
        //         error: function (XMLHttpRequest, textStatus, errorThrown) {
        //             alert("失败" + XMLHttpRequest.status + ":" + textStatus + ":" + errorThrown);
        //         }
        //     });
        // }

        //渲染用户信息
        function showMsg(res) {
            console.log("showMsg");
            console.log(res);
            // let r = JSON.parse(res);
            var html = res.map(function (s) {
                var template =
                    `<tr class="tr_head">
<!--                    <td></td>-->
                    <td>${s.id}</td>
                    <td>${s.username}</td>
<!--                    <td>${s.password}</td>-->
                    <td>${s.phone}</td>
                    <td>${s.email}</td>
                    <td>${s.sex}</td>
                    <td>${s.state}</td>
                    <td>${s.role}</td>
                    <td>${s.fakeState}</td>
                    <td><button class="btn btn-warning" onclick="delUser(${s.id})">删除</button></td>
                    <!--<td><button class="btn btn-warning" id="example" onclick="upUser(${s.userId})">修改</button></td>-->
                    <td>
                    <button class="btn btn-primary" data-toggle="modal" onclick="selectByIdUser(${s.id})" data-target="#myModal">
                    修改</button>
                    </td>
                    </tr>`;
                return template
            }).join("");
            $("#tb_list").html(html);
        }

        //删除用户
        function delUser(id) {
            if (confirm("确认要删除该用户吗?")) {
                let url = "adminUser/delete";
                let params = {id:id};
                httpGet(url, params, function () {
                    loadUser();
                });
            }
        }
        //修改用户
        function upUser() {
            if (confirm("确认要修改吗?")) {
                let url = "adminUser/updateById";
                let params = {
                    id:$("#tb_up").find('tr:eq(0)').children('td:eq(1)').text(),
                    username:$("#tb_up").find('tr:eq(1)').find("input").val(),
                    phone:$("#tb_up").find('tr:eq(2)').find("input").val(),
                    email:$("#tb_up").find('tr:eq(3)').find("input").val(),
                    sex:$("#tb_up").find('tr:eq(4)').find("input").val(),
                    state:$("#tb_up").find('tr:eq(5)').find("input").val(),
                    role:$("#tb_up").find('tr:eq(6)').find("input").val(),
                    fakeState:$("#tb_up").find('tr:eq(7)').find("input").val()
                };
                console.log(params);
                httpPost(url, params, function () {
                    loadUser();
                });
            }
        }

        //通过ID查询用户信息
        function selectByIdUser(id) {
            let url = "adminUser/selectById";
            let params = {id:id};
            let pJson=JSON.stringify(params);
            console.log(id);
            httpGet(url, params, function (res) {
                console.log("showGoodsType")
                console.log(res);
                    var template =
                    `<tr><td>编号:</td><td id="id">${res.id}</td></tr>
                     <tr><td>用户名:</td><td><input id="username" type="text" value="${res.username}"></td></tr>
<!--                     <tr><td>密码</td><td><input type="text" value="${res.password}"></td></tr>-->
                     <tr><td>电话:</td><td><input type="text" value="${res.phone}"></td></tr>
                     <tr><td>邮箱:</td><td><input type="text" value="${res.email}"></td></tr>
                     <tr><td>性别:(0女/1男)</td><td><input type="text" value="${res.sex}"></td></tr>
                     <tr><td>用户状态:(0未激活/1已经激活)</td><td><input type="text" value="${res.state}"></td></tr>
                     <tr><td>用户角色0用户:(1商家，2超级管理员)</td><td><input type="text" value="${res.role}"></td></tr>
                     <tr><td>假删除:(0不显示，1显示)</td><td><input type="text" value="${res.fakeState}"></td></tr>`;
                $("#tb_up").html(template);
            });
        }

        //渲染
        function upShowMsg(id) {

        }

        //条件查询
        function inquireUser() {
            //ajax 请求后台
            let url = "";
            let params = {
                username: $("input[name='name']"),
                role: $("input[name='role']")
            }
            httpPost(url, params, function (data) {
                showMsg(data);
            })
        }
    </script>
</head>
<body>

<div class="row" style="width: 100%;">
    <div class="col-md-12">
        <div class="panel panel-default">
            <div class="panel-heading">会员列表</div>
            <div class="panel-body">
                <!-- 条件查询 -->
                <div class="row">
                    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                        <div class="form-group form-inline">
                            <span>用户姓名</span>
                            <input type="text" name="username" id="username" class="form-control">
                        </div>
                    </div>
                    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
                        <div class="form-group form-inline">
                            <span>权限:</span>
                            <label class="radio-inline">
                                <input type="checkbox" name="gender" id="user" value="0">用户&nbsp;&nbsp;&nbsp;&nbsp
                            </label>
                            <label class="radio-inline">
                                <input type="checkbox" name="gender" id="merchant" value="1">商家&nbsp;&nbsp;&nbsp;&nbsp
                            </label>
                            <label class="radio-inline">
                                <input type="checkbox" name="gender" id="superAdmin" value="2">管理员
                            </label>
                        </div>
                    </div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                        <button type="button" class="btn btn-primary" onclick="loadUser()" id="search"><span
                                class="glyphicon glyphicon-search"></span></button>
                    </div>
                </div>
                <div style="overflow: scroll ;height: 600px;">
                <!-- 列表显示 -->
                    <table id="ta_list" class="table table-striped table-hover table-bordered table-condensed">
                        <thead>
                        <th class='tr_head'>
    <!--                    <td>编号</td>-->
                        <td>姓名</td>
    <!--                    <td>密码</td>-->
                        <td>电话</td>
                        <td>邮箱</td>
                        <td title="0:女 1:男">
                            性别
                        </td>
                        <td title="0:未激活 1:已经激活">是否激活</td>
                        <td title="0:用户 1:商家 2:超级管理员">
                            用户角色
                        </td>
                        <td title="0:不显示 1:显示">
                            显示状态
                        </td>
                        <td>删除</td>
                        <td>修改</td>
                        </th>
                        </thead>
                        <tbody id="tb_list">

                        </tbody>
                    </table>
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button class="close" data-dismiss="modal">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                                </div>
                                <div class="modal-body">
                                    <table id="tb_up">
    <!--                                <tr><td>用户名</td><td><input type="text" value="ll"></td></tr>-->
    <!--                                <tr><td>密码</td><td><input type="text" value="ll"></td></tr>-->
    <!--                                <tr><td>用户名</td><td><input type="text" value="ll"></td></tr>-->
    <!--                                <tr><td>用户名</td><td><input type="text" value="ll"></td></tr>-->
                                    </table>
    <!--                                <ul class="ul_upUser" style="list-style: none">-->
    <!--                                    <li>用户名<input type="text" value="ll"></li>-->
    <!--                                    <li>密码<input type="text" value="qq"></li>-->
    <!--                                    <li>地址<input type="text" value="xx"></li>-->
    <!--                                    <li>电话<input type="text" value="dd"></li>-->
    <!--                                </ul>-->

                                </div>
                                <div class="modal-footer">
                                    <a class="btn btn-default" data-dismiss="modal">取消</a>
                                    <a class="btn btn-primary" data-dismiss="modal" onclick="upUser()">修改</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>